﻿<template>
  <dv-border-box-11 title="数据统计">
    <div id="pie-container"></div>
  </dv-border-box-11>
</template>

<script>
import * as echarts from "echarts";
import axios from 'axios'

axios.defaults.baseURL = '/api'

export default {
  data() {
    return {
      data: {}
    }
  },
  methods: {
    genData(count) {
      const nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
      ];
      const legendData = [];
      const seriesData = [];
      for (var i = 0; i < count; i++) {
        var name =
            Math.random() > 0.65
                ? makeWord(4, 1) + '·' + makeWord(3, 0)
                : makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
          name: name,
          value: Math.round(Math.random() * 100000)
        });
      }
      return {
        legendData: legendData,
        seriesData: seriesData
      };

      function makeWord(max, min) {
        const nameLen = Math.ceil(Math.random() * max + min);
        const name = [];
        for (var i = 0; i < nameLen; i++) {
          name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        }
        return name.join('');
      }
    },
    initPie() {
      // 创建 ECharts 实例
      const chartDom = document.getElementById('pie-container');
      const pieChart = echarts.init(chartDom);
      const data = this.genData(50);
      var ontologyType = 'entity';
      if (!this.ontologyType) {
        ontologyType = 'instance';
      }
      axios.get('/ontology/query', {
        params: {
          type: ontologyType
        }
      }).then(
          response => {
            this.graph = JSON.parse(response.data);
          },
          // 失败
          error => {
            console.log('请求失败了', error.message);
          });

      var option = {
        title: {
          text: '同名数量统计',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          height: 680,
          right: 10,
          top: 20,
          bottom: 100,
          data: data.legendData,
          textStyle: {
            color: '#ffffff'
          }
        },
        darkMode: true,
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '65%',
            center: ['45%', '46%'],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.resize()
      pieChart.setOption(option);
    }
  },
  mounted() {
    this.initPie();
  }
};
</script>

<style scoped lang="scss">
#pie-container {
  display: flex;
  position: relative;
  width: 900px;
  height: 800px;
  padding: 0px;
  margin: 0px;
  top: 60px;
  left: 15px;
  user-select: none;
  overflow: hidden;
  align-content: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>